<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base target="_self" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>材料价格信息</title>

<link rel="stylesheet" type="text/css"
	href="<c:url value="/static/jquery-jqplot/jquery.jqplot.css"/>" />
<link rel="stylesheet" type="text/css"
	href="<c:url value="/static/jquery-jqplot/examples/examples.css"/>" />
<script language="javascript" type="text/javascript"
	src="<c:url value="/static/jquery-jqplot/jquery-1.4.2.min.js"/>"></script>

<script language="javascript" type="text/javascript"
	src="<c:url value="/static/jquery-jqplot/jquery.jqplot.js"/>"></script>
<script language="javascript" type="text/javascript"
	src="<c:url value="/static/jquery-jqplot/plugins/jqplot.cursor.js"/>"></script>
<script language="javascript" type="text/javascript"
	src="<c:url value="/static/jquery-jqplot/plugins/jqplot.dateAxisRenderer.js"/>"></script>
<script language="javascript" type="text/javascript"
	src="<c:url value="/static/jquery-jqplot/plugins/jqplot.canvasTextRenderer.js"/>"></script>
<script language="javascript" type="text/javascript"
	src="<c:url value="/static/jquery-jqplot/plugins/jqplot.categoryAxisRenderer.js"/>"></script>
<script language="javascript" type="text/javascript"
	src="<c:url value="/static/jquery-jqplot/plugins/jqplot.pieRenderer.js"/>"></script>
<script language="javascript" type="text/javascript"
	src="<c:url value="/static/jquery-jqplot/plugins/jqplot.barRenderer.js"/>"></script>
<script language="javascript" type="text/javascript"
	src="<c:url value="/static/jquery-jqplot/plugins/jqplot.canvasAxisTickRenderer.js"/>"></script>
<script type="text/javascript"
            src="<c:url value="/static/js/common.js"/>"></script>           

<script type="text/javascript" language="javascript">
	$(document).ready(
			function() {
				$.jqplot.config.enablePlugins = true;
				var yaxismin = 0;//全部订单起始x坐标
				var y2axismin = 0;//支付订单起始x坐标
				var numberTicksmax = 8;//x坐标行数
				//全部订单 
				//var InPr = [['09/01/2011',300],['09/02/2011',400]];
				var InPr = ${materValueVo.materValueAndDateArray }
				
				var materLevel = formatFoodType('${materValueVo.materLevel }');
				var titleString = '材料：' + '${materValueVo.materName }' + '  - 品级：'+ materLevel +'  - 供货商：' + '${materValueVo.supName }' ;
				//支付成功的订单
				//var OutPr = [['09/01/2011',180],['09/02/2011',110],['09/03/2011',241],['09/04/2011',31],['09/05/2011',131],['09/06/2011',132],['09/07/2011',530],['09/08/2011',222],['09/09/2011',110],['09/10/2011',210],['09/11/2011',241],['09/12/2011',130],['09/13/2011',131],['09/14/2011',110],['09/15/2011',210],['09/16/2011',241],['09/17/2011',168],['09/18/2011',110],['09/19/2011',210],['09/20/2011',110],['09/21/2011',210],['09/22/2011',241],['09/23/2011',31],['09/24/2011',110],['09/25/2011',210],['09/26/2011',241],['09/27/2011',31],['09/28/2011',131],['09/29/2011',132],['09/30/2011',530]];

				/* var ticks = [ '09/01/2011', '09/02/2011', '09/03/2011',
						'09/04/2011', '09/05/2011', '09/06/2011', '09/07/2011',
						'09/08/2011', '09/09/2011', '09/10/2011', '09/11/2011',
						'09/12/2011', '09/13/2011', '09/14/2011', '09/15/2011',
						'09/16/2011', '09/17/2011', '09/18/2011', '09/19/2011',
						'09/20/2011', '09/21/2011', '09/22/2011', '09/23/2011',
						'09/24/2011', '09/25/2011', '09/26/2011', '09/27/2011',
						'09/28/2011', '09/29/2011', '09/30/2011' ]; */
				plot1 = $.jqplot('chart1', [ InPr ], {
					title : '价格一览图', //标题

					//seriesDefaults:{neighborThreshold:0, showMarker: false},// fill:true 阴影显示 注释掉后会显示点
					series : [ {
						label : titleString
					}, {
						label : '支付成功',
						yaxis : 'y2axis'
					} ],
					cursor : {
						showVerticalLine : true,//是否显示竖线
						showTooltip : true,//鼠标移动时是否显示订单量
						followMouse : false,//订单量是否跟随鼠标移动，false显示在右下角，true随鼠标移动
						showTooltipDataPosition : true,
						zoom : false,//是否允许局部分析
						intersectionThreshold : 6,
						tooltipFormatString : '%s 日期:%s, 毛料价格(元/${materValueVo.unit }):%s'
					},
					legend : {
						show : true,//显示 全部订单 支付成功
						location : 'nw'
					},
					axesDefaults : {},
					axes : {
						yaxis : {
							min : yaxismin,
							numberTicks : numberTicksmax
						},//全部订单起始x坐标
						y2axis : {
							min : y2axismin,
							numberTicks : numberTicksmax
						},//支付订单起始x坐标
						xaxis : {
							renderer : $.jqplot.DateAxisRenderer,
							rendererOptions : {
								tickRenderer : $.jqplot.CanvasAxisTickRenderer
							//日期要斜着显示，需要配置此项目
							},
							//ticks: ticks,
							tickOptions : {
								formatString : '%y/%m/%d',
								fontFamily : 'Tahoma',
								angle : -60
							// 日期旋转角度
							},
							tickInterval : "1 days"
						}
					}
				});

			});
</script>
</head>
<body>
	<div class="jqPlot" id="chart1" style="height: 320px; width: 800px;"></div>
</body>
</html>